<!-- 审核 -->
<template>
  <div class="audit">
    <div class="container">
      <div class="title">
        账号信息
      </div>
      <a-row
        class="m-t-10"
        type="flex"
        justify="space-around"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">用户名称：</span>
          <span class="">{{info.name}}</span>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">账号：</span>
          <span class="">{{info.account}}</span>
        </a-col>
      </a-row>
      <a-row
        class="m-t-20"
        type="flex"
        justify="space-around"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">所属区域：</span>
          <span class="">{{info.areaName}}</span>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">用户类型：</span>
          <span class="">{{typeName}}</span>
        </a-col>
      </a-row>
    </div>
    <div
      class="container m-t-14"
      style="height:160px"
    >
      <div class="title">
        基本信息
      </div>
      <a-row
        class="m-t-10"
        type="flex"
        justify="space-around"
      >
        <a-col
          v-if="type !== '1'"
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">统一社会信用代码：</span>
          <span class="">{{info.socialCreditCode}}</span>
        </a-col>
        <a-col
          v-else
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">身份证号：</span>
          <span class="">{{info.identityCardNumber}}</span>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">通讯地址：</span>
          <span class="">{{info.address}}</span>
        </a-col>
      </a-row>
      <a-row
        class="m-t-20"
        type="flex"
        justify="space-around"
        v-if="type !== '1'"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">法人代表：</span>
          <span class="">{{info.legalPerson}}</span>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">法人代表电话：</span>
          <span class="">{{info.legalPersonPhone}}</span>
        </a-col>
      </a-row>
      <a-row
        class="m-t-20"
        type="flex"
        justify="space-around"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">联系人：</span>
          <span class="">{{info.contactPerson}}</span>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <span class="m-r-10 w-110 text-align-right">联系人手机：</span>
          <span class="">{{info.contactPersonPhone}}</span>
        </a-col>
      </a-row>
    </div>
    <div
      class="container m-t-14"
      style="height:500px"
      v-if="type !== '1'"
    >

      <div class="title">
        <a-row
          type="flex"
          justify="center"
          style="width:100%"
        >
          <a-col
            :span="12"
            class="display-flex align-items-center"
          >
            <span>营业执照或法人登记证</span>
          </a-col>
          <a-col
            
            :span="12"
            class="display-flex align-items-center"
          >
            <span v-show="type === 2">代理机构注册证</span>
          </a-col>
        </a-row>

      </div>
      <a-row
        class="m-t-10"
        type="flex"
        justify="space-around"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <img
            @click="picVisible = true;this.picUrl = nfo.businessLicense"
            style="width:326px;height:440px"
            :src="info.businessLicense"
            alt="营业执照或法人登记证"
          >
        </a-col>
        <a-col
          v-if="type === '2'"
          @click="picVisible = true;this.picUrl = info.registrationCertificate"
          :span="8"
          class="display-flex align-items-center"
        >
          <img
            style="width:326px;height:440px"
            :src="info.registrationCertificate"
            alt="代理机构注册证"
          >
        </a-col>
      </a-row>
    </div>
    <div
      class="container m-t-14"
      style="height:310px"
      v-else
    >
      <div class="title">
        身份证正反面
      </div>
      <a-row
        class="m-t-10"
        type="flex"
        justify="space-around"
      >
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <img
            @click="picVisible = true;picUrl = info.identityCardFront"
            style="width:400px;height:250px"
            :src="info.identityCardFront"
            alt="身份证正面"
          >
        </a-col>
        <a-col
          @click="picVisible = true;picUrl = info.identityCardReverse"
          :span="8"
          class="display-flex align-items-center"
        >
          <img
            style="width:400px;height:250px"
            :src="info.identityCardReverse"
            alt="身份证反面"
          >
        </a-col>
      </a-row>
    </div>
    <div
      class="container m-t-14"
      style="height:260px"
    >
      <div class="title">
        审核
      </div>
      <a-row
        class="m-t-40"
        type="flex"
        justify="center"
      >
        <a-col
          :span="16"
          class="display-flex align-items-center"
        >
          <span class="w-100">审核意见：</span>
          <a-textarea
            :maxLength="100"
            v-model="reviewOpinion"
            placeholder="≤100位字符"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-col>
      </a-row>
      <a-row
        class="m-t-50"
        type="flex"
        justify="center"
      >
        <a-col
          :offset="7"
          :span="4"
          class="display-flex align-items-center"
        >
          <a-button type="primary" @click="approved('4')">
            审核通过
          </a-button>
        </a-col>
        <a-col
          :span="8"
          class="display-flex align-items-center"
        >
          <a-button type="danger" @click="approved('3')">
            退回修改
          </a-button>
        </a-col>
      </a-row>

    </div>
    <a-modal
      width="800px"
      title="预览"
      :visible="picVisible"
      :footer="null"
      @cancel="picVisible = false"
    >
      <div class="img_wrap">
        <img
          :src="picUrl"
          alt="样本图片"
          :style="{width:'100%',height:'100%'}"
        >
      </div>
    </a-modal>
  </div>
</template>

<script>

export default {
  name: 'audit',
  data () {
    return {
      type: "",  //用户类型,
      typeName: '',
      userId: '', //用户id
      info: {},  //信息
      reviewOpinion: '',  //审核意见
      picUrl: '',
      picVisible: false
    };
  },
  mounted () {
    const { id, type } = this.$route.query
    this.userId = id
    this.type = type
    switch (type) {
      case '1':
        this.personalInfo()
        this.typeName = '个人'
        break;
      case '2':
        this.agencyInfo()
        this.typeName = '代理机构'
        break;
      case '3':
        this.companyInfo()
        this.typeName = '单位'
        break;

      default:
        break;
    }
  },
  methods: {
    onSearch () { },
    onChange () { },
    //个人信息
    personalInfo () {
      this.$axios({
        url: 'user/personal/info',
        method: 'get',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          userId: this.userId
        }
      }).then(res => {
        this.info = res.data
      })
    },
    //代理机构
    agencyInfo () {
      this.$axios({
        url: 'user/agency/info',
        method: 'get',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          userId: this.userId
        }
      }).then(res => {
        this.info = res.data
      })
    },
    //单位
    companyInfo () {
      this.$axios({
        url: 'user/company/info',
        method: 'get',
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        params: {
          userId: this.userId
        }
      }).then(res => {
        this.info = res.data
      })
    },
    //审核通过/退回
    approved(stateFlag){
      this.$axios({
        url:'user/review',
        method:"post",
        loadingEl: this.$el,
        cancel: {
          _self: this
        },
        data:{
          userId:this.userId,
          reviewOpinion:this.reviewOpinion,
          stateFlag
        }
      }).then(res=>{
       this.$router.push({path:'/account/averageUser'})
      })
    }
  }
}

</script>
<style scoped lang='less'>
.audit {
  padding: 20px;
  height: 100%;
  overflow: auto;
  .container {
    height: 120px;
    border: 1px solid #e8e8e8;
    border-radius: 10px 10px 0 0;
    .title {
      display: flex;
      align-items: center;
      padding-left: 16px;
      height: 36px;
      background: rgba(243, 243, 243, 1);
    }
  }
 
}
 .img_wrap{
    width: 750px;
    height: 650px;
  }
/deep/.ant-modal-body {
  height: 720px;
}
</style>